﻿@page
@model Net8.Identity.Server.Pages.ErrorModel
@{
    ViewData["Title"] = "错误";
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card-modern mt-5">
                <div class="card-header" style="background: linear-gradient(135deg, var(--danger-color) 0%, #ef4444 100%);">
                    <h3 class="mb-2">
                        <i class="bi bi-exclamation-triangle me-2"></i>发生错误
                    </h3>
                    <p class="mb-0">请求处理过程中出现异常</p>
                </div>
                
                <div class="card-body text-center">
                    <div class="error-icon mb-4">
                        <i class="bi bi-exclamation-triangle"></i>
                    </div>
                    
                    <h4 class="text-danger mb-3">操作失败</h4>
                    <p class="text-muted mb-4">系统在处理您的请求时发生了错误</p>

                    @if (Model.ShowRequestId)
                    {
                        <div class="alert alert-info alert-modern mb-4 text-start">
                            <h6 class="alert-heading">
                                <i class="bi bi-info-circle me-1"></i>错误标识
                            </h6>
                            <p class="mb-0">
                                <strong>请求ID：</strong>
                                <code class="bg-light p-1 rounded">@Model.RequestId</code>
                            </p>
                            <small class="text-muted mt-1 d-block">
                                请在联系技术支持时提供此ID
                            </small>
                        </div>
                    }

                    <div class="alert alert-warning alert-modern mb-4 text-start">
                        <h6 class="alert-heading">
                            <i class="bi bi-lightbulb me-1"></i>建议操作
                        </h6>
                        <ul class="mb-0">
                            <li>请检查您输入的信息是否正确</li>
                            <li>刷新页面后重试</li>
                            <li>清除浏览器缓存和Cookie</li>
                            <li>联系系统管理员获取帮助</li>
                        </ul>
                    </div>

                    <div class="row g-2">
                        <div class="col-md-6">
                            <a href="/" class="btn btn-primary btn-modern w-100">
                                <i class="bi bi-house me-2"></i>返回首页
                            </a>
                        </div>
                        <div class="col-md-6">
                            <button onclick="history.back()" class="btn btn-outline-secondary btn-modern w-100">
                                <i class="bi bi-arrow-left me-2"></i>返回上页
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <button onclick="window.location.reload()" class="btn btn-outline-primary btn-modern">
                            <i class="bi bi-arrow-clockwise me-2"></i>刷新页面
                        </button>
                    </div>
                </div>
                
                <div class="card-footer text-center" style="background: var(--gray-50); border-top: 1px solid var(--gray-200); padding: 1rem;">
                    <small class="text-muted">
                        <i class="bi bi-shield-check me-1"></i>
                        系统安全保护中 | 如需技术支持，请联系管理员
                    </small>
                </div>
            </div>
            
            <!-- 额外信息 -->
            <div class="text-center mt-4">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="feature-card" style="padding: 1rem;">
                            <div class="icon icon-info" style="width: 2rem; height: 2rem; font-size: 0.8rem; margin: 0 auto 0.5rem;">
                                <i class="bi bi-question-circle"></i>
                            </div>
                            <small class="fw-semibold">常见问题</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card" style="padding: 1rem;">
                            <div class="icon icon-success" style="width: 2rem; height: 2rem; font-size: 0.8rem; margin: 0 auto 0.5rem;">
                                <i class="bi bi-headset"></i>
                            </div>
                            <small class="fw-semibold">技术支持</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="feature-card" style="padding: 1rem;">
                            <div class="icon icon-warning" style="width: 2rem; height: 2rem; font-size: 0.8rem; margin: 0 auto 0.5rem;">
                                <i class="bi bi-bug"></i>
                            </div>
                            <small class="fw-semibold">问题反馈</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 自动倒计时返回首页（可选）
            // setTimeout(function() {
            //     window.location.href = '/';
            // }, 10000); // 10秒后自动跳转
            
            // 按钮交互增强
            document.querySelectorAll('.btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    if (!this.disabled) {
                        this.style.transform = 'scale(0.95)';
                        setTimeout(() => {
                            this.style.transform = 'scale(1)';
                        }, 150);
                    }
                });
            });
        });
    </script>
}